In this tutorial, we look at the Location Strategy (Angular Routing Strategy) supported by the Angular routing module.Angular Supports PathlocationStrategy and HashLocationStrategy. We will look at what is client-side routing and how it works. We take a look at how hash style HTML5 routing works and the pros and cons of each. Finally, we will learn how to build the Angular application using the PathLocationStrategy (HTML5 routing ) HashLocationStrategy.(hash style Routing )
Being a Single Page Application, the Angular applications should not send the URL to the server and should not reload the page, every time the user requests a new page.
The URLs are strictly local in Angular Apps. The Angular router navigates to the new component and renders its template and updates the history and URL for the view. All this happens locally in the browser.
There are two ways, by which Angular achieves this. These are called Location Strategies.
The Location Strategy defines how our URL/Request is resolved. It also determines how your URL will look like
Angular supports two Location Strategies:
Before going further let's first understand what client-side routing is
In a Multi-page web application, Every time the application needs to display a page it has to send a request to the web server. You can do that by either typing the URL in the address bar, or clicking on the Menu link/ button. Every such action results in the browser sending a new request to the Web server
But, Angular Applications are single-page applications or SPA.
All the components are displayed on a single page
In a Typical Single Page Application, when the Web application is loaded it loads a single HTML page. Whenever the user interacts with the page, only a part of the page is dynamically updated.
If you open the index.html in any of the angular applications, you would see the following HTML markup
<body>
<app-root>Loading...</app-root>
</body>
The "app-root" is a placeholder (selector), which is defined in the root component.
Angular generates and loads the view associated with the root component inside the "app-root". Any subsequent components are also loaded dynamically inside the "app-root" selector
Angular does all this behind the scenes.
In such a scenario, we are not required to change the URL. But that brings a few cons
That is where the client-side routing comes into the picture
The Client-side routing simply mimics server-side routing by running the process in the browser. It changes the URL in the browser address bar and updates the browser history, without actually sending the request to the server
The Client-side routing is handled in two ways
The Hash style routing uses the anchor tags technique to achieve client-side routing.
The anchor tags, when used along with the # allows us to jump to a place, within the web page.
For Example
Index.html
<a name="contact">Contact Us</a>
When we visited the URL http://mysite.com/index.html#contact, the browser would scroll to the location of the Contact us label
When the requested anchor tag is on the current page, then the browser does not send the request to the Web server.
The Hashstyle Routing uses this technique to create the URL
The URL would look something like
http://www.example.com
http://www.example.com/#/about
http://www.example.com/#/contact
In all the above examples, only the URL sent to the server is http://www.example.com the URL's "#/about" and #/contact is never sent to the server
The introduction of HTML5, now allows browsers to programmatically alter the browser's history through the history object.
Using history.pushState() method, we can now programmatically add the browser history entries and change the location without triggering a server page request.
var stateObj= { message: "some message" };
history.pushState(stateObj, "title", newUrl);
Using history.pushState the method, The browser creates new history entries that change the displayed URL without the need for a new request.
Example
When you request for http://www.example.com the server sends the index.html
Now, When you click on ProductList link, Angular use’s the history.pushState method to push the state and change the URL to http://www.example.com/ProductList
Now, when you click on the specific Product, we again the use history method to push the state and change the URL to http://www.example.com/product/1
Here, when you click the back button, the browser will retrieve the http://www.example.com/ProductList from history and displays it.
But there are cons to this approach
Now, consider the above example
What would happen, when you type the URL http://www.example.com/ProductList and hit the refresh button.
The browser will send the request to the web server. Since the page ProductList does not exist, it will return the 404 (page not found) error.
This problem could be solved, if we are able to redirect all the requests to the index.html
It means that when you ask from http://www.example.com/ProductList, the Web server must redirect it to index.html and return the request. Then in the Front-end Angular will read the URL and dynamically load the ProductListComponent.
To make HTML5 routing work you need to send the instruction to the webserver to serve < /index.html> for any incoming request, no matter what the path is.
As mentioned earlier, Angular implements both Hashstyle & HTML 5 Routing. HashLocationstrategy implements the Hashstyle routing & Pathlocationstrategy implements the HTML5 style routing
Server-side Rendering is a technique that renders critical pages on the server that can greatly improve perceived responsiveness when the app first loads
Cons:
The PathLocationStrategy is the default strategy in the Angular application.
To Configure the strategy, we need to add <base href> in the
section of the root page (index.html) of our application
<base href="/">
The Browser uses this element to construct the relative URLs for static resources (images, CSS, scripts) contained in the document.
If you do not have access to <head> Section of the index.html, then you can follow either of the two steps
Add the APP_BASE_HREF value as shown in the provider’s section of the root module
import {Component, NgModule} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';
@NgModule({
providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
})
class AppModule {}
Here, when you click the back button, the browser will retrieve the http://www.example.com/ProductList from history and displays it.
or use the absolute path for all the static resources like CSS, images, scripts, and HTML files.
You can use the HashLocationStrategy by providing the useHash: true in an object as the second argument of the RouterModule.forRoot in the AppModule.
@NgModule,({
declarations: [
AppComponent,HomeComponent,ContactComponent,ProductComponent,ErrorComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
Hashlocationstrategy RouterModule.forRoot(appRoutes, { useHash: true }
],
providers: [ProductService],
bootstrap: [AppComponent]
})
We recommend you use the HTML 5 style (PathLocationStrategy) as your location strategy.
Because
Use the hash location strategy only if you have to support older browsers.
Angular supports two different location strategies or Routing strategies in Angular. One is PathlocationStrategy and the other one is HashLocationStrategy. The HashLocationStrategy use the Hash style routing, while PathlocationStrategy uses the HTML 5 Routing.
